<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-10-28 15:10:52
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-04-23 14:51:00
 * @FilePath: \backstage\src\views\pages\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="home">
        <div class="home_left">
            <div class="echartsBox">
                <div class="title">
                    <div class="text">待办事项</div>
                    <div class="functionKey">全部</div>
                </div>
                <div class="content">
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>
                    <div class="dealtContent">
                        <div class="first">
                            <div class="dj">初级</div>
                            <div class="qd">004368【C30】</div>
                        </div>
                        <div class="second">
                            <div class="titles">牛王山隧道出口：左洞加宽段二衬ZK15+577.6-...</div>
                            <div class="detail">»</div>
                        </div>
                        <div class="third">
                            <div class="bhj">3号机拌合机</div>
                            <div class="jg"></div>
                            <div class="time">出料时间： 2022-09-09 09:21:12</div>
                        </div>
                    </div>



                </div>
            </div>
            <div class="echartsBox">
                <div class="title">闭合统计</div>
                <div class="content">
                    <close></close>
                </div>
            </div>
            <div class="echartsBox">
                <div class="title">

                    <div class="text">质量管控</div>
                    <div class="functionKey">筛选</div>
                </div>
                <div class="content">
                    <QualityControl :commonData="qualityData"></QualityControl>
                </div>
            </div>

        </div>
        <div class="home_right">
            <div class="right_top">
                <div class="title">预警统计</div>
                <div class="content">
                    <earlyWarn :commonData="warningData"></earlyWarn>
                </div>
            </div>
            <div class="right_bottom">
                <div class="title">设备数量</div>
                <div class="content">
                    <div class="equipmentBox">
                        <div class="equipmentLeft tong">
                            <div class="icon">
                                <img src="../assets/img/index/tong.png" alt="">
                            </div>
                            <div class="equipmentText">砼拌合站</div>
                        </div>
                        <div class="equipmentRight" style="background: rgba(149, 145, 255, 0.1);">{{ equipData.concreteCount
                        }}</div>
                    </div>

                    <div class="equipmentBox">
                        <div class="equipmentLeft sw">
                            <div class="icon">
                                <img src="../assets/img/index/sw.png" alt="">
                            </div>
                            <div class="equipmentText">水稳拌合站</div>
                        </div>
                        <div class="equipmentRight" style="background: rgba(54, 146, 250, 0.1);">{{ equipData.waterCount }}
                        </div>
                    </div>
                    <div class="equipmentBox">
                        <div class="equipmentLeft lq">
                            <div class="icon">
                                <img src="../assets/img/index/lq.png" alt="">
                            </div>
                            <div class="equipmentText">沥青拌合站</div>
                        </div>
                        <div class="equipmentRight" style="background: rgba(0, 206, 139, 0.1);">{{ equipData.asphaltCount }}
                        </div>
                    </div>
                    <div class="equipmentBox">
                        <div class="equipmentLeft zl">
                            <div class="icon">
                                <img src="../assets/img/index/zl.png" alt="">
                            </div>
                            <div class="equipmentText">智能张拉</div>
                        </div>
                        <div class="equipmentRight" style="background: rgba(184, 143, 255, 0.1);">{{
                            equipData.tensionCount }}</div>
                    </div>
                    <div class="equipmentBox">
                        <div class="equipmentLeft yj">
                            <div class="icon">
                                <img src="../assets/img/index/yj.png" alt="">
                            </div>
                            <div class="equipmentText">智能压浆</div>
                        </div>
                        <div class="equipmentRight" style="background: rgba(248, 106, 62, 0.1);">{{ equipData.groutingCount
                        }}
                        </div>
                    </div>


                </div>
            </div>

        </div>
    </div>
</template>
<script>
import QualityControl from "@/components/index/QualityControl";
import close from "@/components/index/close";
import earlyWarn from "@/components/index/earlyWarn";


import {
    getConcreteWarningStatistics,//首页-预警统计接口
    getEquipStatistics,// 首页-设备数量统计接口
    getQualityStatistics,//首页-质量管控统计接口


} from "@/api/request.js";

export default {
    name: "timePeriod",
    data() {
        return {
            userInfo: {},
            warningData: [],//预警统计
            equipData: {},//设备数量
            qualityData: [],//质量管控
        }
    },
    components: {
        QualityControl,
        close,
        earlyWarn
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem("yjSmart-userInfo"));
        this.WarningStatistics()//预警统计
        this.equipStatistics()//首页-设备数量统计接口
        this.qualityStatistics()//首页-质量管控统计接口
    },

    methods: {
        WarningStatistics() {//首页-预警统计接口
            getConcreteWarningStatistics({
                companyId: this.userInfo.companyId,// 登陆用户所属公司id
                userId: this.userInfo.userId// 用户id
            }).then((res) => {
                if (res.errcode == 0) {
                    this.warningData = res.data
                    console.log(this.warningData);
                } else {
                    this.$message.error('预警统计', res.msg);
                }
            })
        },
        equipStatistics() {// 首页-设备数量统计接口
            getEquipStatistics({
                companyId: this.userInfo.companyId,// 登陆用户所属公司id
                userId: this.userInfo.userId// 用户id
            }).then((res) => {
                if (res.errcode == 0) {
                    this.equipData = res.data[0]
                } else {
                    this.$message.error('设备数量', res.msg);
                }
            })
        },
        qualityStatistics() {// 首页-质量管控统计接口
            getQualityStatistics({
                companyId: this.userInfo.companyId,// 登陆用户所属公司id
                userId: this.userInfo.userId// 用户id
            }).then((res) => {
                if (res.errcode == 0) {
                    this.qualityData = res.data

                } else {
                    this.$message.error('质量管控', res.msg);
                }
            })
        },
    },
};
</script>
<style lang="less" scoped>
.home {
    font-size: 0.16rem;
    display: flex;
    justify-content: space-between;
    background: #F0F2F5;
    -moz-user-select: none;
    /* Firefox私有属性 */

    -webkit-user-select: none;
    /* WebKit内核私有属性 */

    -ms-user-select: none;
    /* IE私有属性(IE10及以后) */

    -khtml-user-select: none;
    /* KHTML内核私有属性 */

    -o-user-select: none;
    /* Opera私有属性 */

    user-select: none;
    /* CSS3属性 */



    .home_left {
        width: 70%;
        height: 100%;
        padding: 8px 0;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .echartsBox {
            width: 100%;
            height: 32.8%;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            padding: 0 16px 8px;
            box-sizing: border-box;


            .title {
                height: 31px;
                line-height: 31px;
                padding: 0 16px;
                border-bottom: 1px solid #7E868E;
                font-size: 0.14rem;
                color: #171A1D;
                display: flex;
                justify-content: space-between;

                .functionKey {
                    cursor: pointer;
                }

            }

            .content {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0.16rem 0 0.05rem 0;
                box-sizing: border-box;
                align-content: space-between;

                .dealtContent {

                    background: rgba(240, 242, 245, 1);
                    width: 32.7%;
                    height: 47.5%;
                    border: 0.01rem solid rgba(126, 134, 142, 0.24);
                    border-radius: 0.04rem;
                    padding: 0.16rem;
                    box-sizing: border-box;
                    overflow: hidden;
                    min-height: 72px;

                    .first {
                        color: rgba(23, 26, 29, 1);
                        font-size: 0.14rem;
                        display: flex;
                        // line-height: 0.2rem; 
                        // height: 0.2rem;
                        line-height: 1;
                        height: 30%;
                        align-items: center;

                        .dj {
                            width: 0.46rem;
                            height: 100%;
                            background: rgba(0, 127, 255, 0.12);
                            border: 0.008rem solid rgba(0, 127, 255, 1);
                            border-radius: 0.02rem;
                            color: rgba(0, 127, 255, 1);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 0.12rem;
                            min-width: 25px;
                        }

                        .qd {}
                    }

                    .second {
                        overflow: hidden;
                        display: flex;
                        // line-height: 0.35rem;
                        // height: 0.35rem;
                        line-height: 1;
                        height: 40%;
                        justify-content: space-between;
                        align-items: center;

                        .titles {
                            flex: 1;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            padding: 0;
                            color: rgba(114, 117, 119, 1);
                            font-size: 0.14rem;
                        }

                        .detail {
                            width: 30px;
                            height: 100%;
                            // border: 1px solid red;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 26px;
                            color: rgba(23, 26, 29, 0.40);
                            cursor: pointer;
                        }
                    }

                    .third {
                        border-top: 0.008rem dotted rgba(126, 134, 142, 0.24);
                        color: rgba(23, 26, 29, 0.40);
                        font-size: 0.12rem;
                        display: flex;
                        overflow: hidden;
                        align-items: center;
                        // line-height: 0.28rem;
                        // height: 0.28rem;
                        line-height: 1;
                        height: 40%;

                        .bhj {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        .jg {
                            width: 0.01rem;
                            height: 0.1rem;
                            background: rgba(23, 26, 29, 0.4);
                            margin: 0 0.08rem;
                        }

                        .time {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }

                }

            }
        }
    }

    .home_right {
        width: 29.6%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 8px 0;
        box-sizing: border-box;


        .right_top {
            width: 100%;
            height: 32.8%;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            padding: 0 16px 8px;
            box-sizing: border-box;


            .title {
                height: 31px;
                line-height: 31px;
                padding: 0 16px;
                border-bottom: 1px solid #7E868E;
                font-size: 0.14rem;
                color: #171A1D;
            }

            .content {
                flex: 1;
                // background: green;


            }
        }

        .right_bottom {
            width: 100%;
            height: 66.34%;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            padding: 0 16px 8px;
            box-sizing: border-box;


            .title {
                height: 31px;
                line-height: 31px;
                padding: 0 16px;
                // background: pink;
                border-bottom: 1px solid #7E868E;
                font-size: 0.14rem;
                color: #171A1D;
            }

            .content {
                flex: 1;

                .equipmentBox {
                    width: 100%;
                    height: 0.75rem;
                    margin-top: 0.16rem;
                    background: rgb(rgba(250, 250, 250, 1));
                    border-radius: 0.06rem;
                    display: flex;


                    .equipmentLeft {
                        width: 53%;
                        padding-left: 0.18rem;
                        box-sizing: border-box;
                        position: relative;
                        padding-left: 0.45rem;
                        display: flex;
                        align-items: center;


                        .icon {
                            // width: 0.37rem;
                            // height: 0.39rem;
                            width: 37px;
                            height: 39px;
                            margin-right: 0.22rem;
                            // border: 1px solid red;


                            img {
                                width: 100%;
                                height: 100%;
                                vertical-align: middle;
                            }
                        }

                        .equipmentText {
                            color: rgba(23, 26, 29, 0.60);
                            font-size: 0.14rem;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }



                    }

                    .equipmentLeft::before {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 0.03rem;
                        height: 48.6%;
                        transform: translate(-50%, -50%);
                        top: 50%;
                        left: 8%;
                    }

                    .tong::before {
                        background: rgba(149, 145, 255, 1);
                    }

                    .sw::before {
                        background: rgba(54, 146, 250, 1);
                    }

                    .lq::before {
                        background: rgba(0, 206, 139, 1);
                    }

                    .zl::before {
                        background: rgba(184, 143, 255, 1);
                    }

                    .yj::before {
                        background: rgba(248, 106, 62, 1);
                    }

                    .equipmentRight {
                        width: 47%;
                        border-top-left-radius: 0.4rem;
                        border-bottom-left-radius: 0.4rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: rgba(23, 26, 29, 1);
                        font-size: 0.24rem;
                        font-weight: 700;

                    }

                }

                // background: green;

            }
        }

    }
}
</style>